import { ref, onMounted, onUnmounted, toValue } from "vue";

export function useMyFun() {
    const x = ref(0)
    const y = ref(0)

    function update(event) {
        x.value = event.pageX
        y.value = event.pageY
    }

    onMounted(() => {
        window.addEventListener('mousemove', update)
    })

    onUnmounted(() => {
        window.removeEventListener('mousemove', update)
    })

    return { x, y }
}

export function useFetch(url) {
    const data = ref(null)
    const error = ref(null)
    fetch(toValue(url))
        .then(res => res.json())
        .then((join) => (data.value = join))
        .catch((err) => (error.value = err))

    return { data, error }
}
